<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useInterval } from '@vueuse/core'
const { counter, pause, resume } = useInterval(1000, { controls: true })

const video=ref<HTMLVideoElement>()
onMounted(async () => {
    resume()
    setInterval(()=>{
        console.log(video.value?.ended)
    },1000)
})


</script>

<template>
      <span>Second Count:</span><span>{{counter}}</span>
        <video ref="video" loop style="position: absolute;width:100px;height:100px;" autoplay src="./src/1.mp4">
            <!-- <source type="video/webm" src="data:video/webm;base64,GkXfo0AgQoaBAUL3gQFC8oEEQvOBCEKCQAR3ZWJtQoeBAkKFgQIYU4BnQI0VSalmQCgq17FAAw9CQE2AQAZ3aGFtbXlXQUAGd2hhbW15RIlACECPQAAAAAAAFlSua0AxrkAu14EBY8WBAZyBACK1nEADdW5khkAFVl9WUDglhohAA1ZQOIOBAeBABrCBCLqBCB9DtnVAIueBAKNAHIEAAIAwAQCdASoIAAgAAUAmJaQAA3AA/vz0AAA="> -->
        </video>
</template>

<style scoped>
span{
    color: aliceblue;
}
</style>
